<template>
	<view>
		<!-- 审核状态下，首页是用的数据 -->
		<view class="index-beautiful" v-for="(item,index) in list" :key="index" @click="onClick(item.id)">
			<image class="beautiful-image" :src="item.image" mode="aspectFill"></image>
			<view class="beautiful-right">
				<view class="beautiful-title">{{item.title}}</view>
				<view style="margin-top: auto;color: #999;">作者：{{item.author}}</view>
				<view style="color: #999;">阅读：{{item.read_num}}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
  name: 'ShenheStateIndexBeautiful',
  props: ['beautifulList'],
  data() {
    return {
      list: [{
        id: 1,
        image: 'https://ow.yunxianghuyu.com/static_picture/1.png',
        title: '我本将心向明月，奈何明月照沟渠',
        author: '晴天',
        read_num: 5331,
      },
      {
        id: 2,
        image: 'https://ow.yunxianghuyu.com/static_picture/2.png',
        title: '从中心花园回家',
        author: '佚名',
        read_num: 670,
      },
      {
        id: 3,
        image: 'https://ow.yunxianghuyu.com/static_picture/3.png',
			  title: '塞纳河畔的风声',
			  author: '佚名',
			  read_num: 2389,
      },
      {
        id: 4,
        image: 'https://ow.yunxianghuyu.com/static_picture/5.png',
			  title: '方有趣很有趣',
			  author: '全意',
			  read_num: 8992,
      },
      {
        id: 5,
        image: 'https://ow.yunxianghuyu.com/static_picture/4.png',
			  title: '风见树摇曳',
			  author: '阿尔法',
			  read_num: 2210,
      },
      ]
    }
  },
  methods: {
    onClick(id) {
      // uni.navigateTo({ url: `/pages/index/beautiful-detail/index?id=${id}` })
    },
  }
}
</script>

<style lang="less" scoped>
	.index-beautiful {
		display: flex;
		padding: 20rpx 36rpx;
		border-bottom: 2rpx solid #f8f8f8;
	}

	.beautiful-image {
		border-radius: 10rpx;
		width: 160rpx;
		height: 160rpx;
		flex-shrink: 0;
		margin-right: 20rpx;
	}

	.beautiful-right {
		display: flex;
		flex-direction: column;
		color: #333;
		font-size: 26rpx;
	}

	.beautiful-title {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
</style>
